<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters
    const s = 130; // Side length of the square
    const startX = 70;
    const startY = 70;
    const lineWidth = 2;
    const labelOffset = 25;
    const mainFont = '24px serif';
    const bFont = 'italic 30px serif';
    const subFont = '20px serif';

    // Set styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = lineWidth;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Draw the Frame (日-shape) ---
    // Outer rectangle
    ctx.strokeRect(startX, startY, 2 * s, s);
    // Inner vertical line AB
    ctx.beginPath();
    ctx.moveTo(startX + s, startY);
    ctx.lineTo(startX + s, startY + s);
    ctx.stroke();

    // --- Draw Corner Labels ---
    ctx.font = mainFont;
    // Label x
    ctx.fillText('x', startX - labelOffset, startY - labelOffset);
    // Label y
    ctx.fillText('y', startX - labelOffset, startY + s + labelOffset);
    // Label A
    ctx.fillText('A', startX + s, startY - labelOffset);
    // Label B
    ctx.fillText('B', startX + s, startY + s + labelOffset);
    // Label D
    ctx.fillText('D', startX + 2 * s + labelOffset, startY - labelOffset);
    // Label C
    ctx.fillText('C', startX + 2 * s + labelOffset, startY + s + labelOffset);

    // --- Draw Left Magnetic Field (xyBA) ---
    const leftCenterX = startX + s / 2;
    const leftCenterY = startY + s / 2;

    // Label B_左
    ctx.font = bFont;
    ctx.fillText('B', leftCenterX - 10, leftCenterY + 5);
    ctx.font = subFont;
    ctx.fillText('左', leftCenterX + 12, leftCenterY + 15);

    // Dots (Field pointing out of the page)
    const dotRadius = 3;
    const fieldSymbolOffset = s / 3.5;
    // top-left dot
    ctx.beginPath();
    ctx.arc(leftCenterX - fieldSymbolOffset, leftCenterY - fieldSymbolOffset, dotRadius, 0, 2 * Math.PI);
    ctx.fill();
    // top-right dot
    ctx.beginPath();
    ctx.arc(leftCenterX + fieldSymbolOffset, leftCenterY - fieldSymbolOffset, dotRadius, 0, 2 * Math.PI);
    ctx.fill();
    // bottom-left dot
    ctx.beginPath();
    ctx.arc(leftCenterX - fieldSymbolOffset, leftCenterY + fieldSymbolOffset, dotRadius, 0, 2 * Math.PI);
    ctx.fill();
    // bottom-right dot
    ctx.beginPath();
    ctx.arc(leftCenterX + fieldSymbolOffset, leftCenterY + fieldSymbolOffset, dotRadius, 0, 2 * Math.PI);
    ctx.fill();


    // --- Draw Right Magnetic Field (ABCD) ---
    const rightCenterX = startX + 1.5 * s;
    const rightCenterY = startY + s / 2;

    // Label B_右
    ctx.font = bFont;
    ctx.fillText('B', rightCenterX - 10, rightCenterY + 5);
    ctx.font = subFont;
    ctx.fillText('右', rightCenterX + 12, rightCenterY + 15);

    // Crosses (Field pointing into the page)
    function drawCross(cx, cy, size) {
        ctx.beginPath();
        ctx.moveTo(cx - size, cy - size);
        ctx.lineTo(cx + size, cy + size);
        ctx.moveTo(cx + size, cy - size);
        ctx.lineTo(cx - size, cy + size);
        ctx.stroke();
    }
    const crossSize = 7;
    ctx.lineWidth = 1.8; // Set line width for crosses
    // top-left cross
    drawCross(rightCenterX - fieldSymbolOffset, rightCenterY - fieldSymbolOffset, crossSize);
    // top-right cross
    drawCross(rightCenterX + fieldSymbolOffset, rightCenterY - fieldSymbolOffset, crossSize);
    // bottom-left cross
    drawCross(rightCenterX - fieldSymbolOffset, rightCenterY + fieldSymbolOffset, crossSize);
    // bottom-right cross
    drawCross(rightCenterX + fieldSymbolOffset, rightCenterY + fieldSymbolOffset, crossSize);

</script>
</body>
</html>